<template>
  <el-table :data="tableData" :border="border">
    <el-table-column v-if="index" type="index" width="60" :align="align"></el-table-column>
    <el-table-column v-for="item in tableHeade" :prop="item.prop" :label="item.label" :width="item.width" :align="align">
      <template v-slot:default="scope" v-if="item.custom">
        <slot name="default" :head="item.prop" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <el-table-column v-if="operationList.length" :fixed="fixed" label="操作" :width="width" :align="align">
      <template #default="scope">
        <span v-for="item in operationList" :key="item.index" >
          <el-popconfirm title="确定删除该行数据?" @confirm="confirmDelete(scope)" v-if="item.name === '删除'">
            <template #reference>
              <span class="button" v-if="item.isShow" link type="primary" :style="{color: item.color ? item.color : ''}" size="small">{{ item.name }}</span>
            </template>
          </el-popconfirm>
          <span v-else>
            <span class="button" v-if="item.isShow" link type="primary" :style="{color: item.color ? item.color : ''}" size="small" @click="handleClick(item, scope)">{{ item.name }}</span>
          </span>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { withDefaults, onMounted } from 'vue'
import type { tableDataType, tableHeade, operationListType } from './type'

let props = withDefaults(defineProps<{
  tableData: tableDataType [],
  tableHeade: tableHeade [],
  operationList?: operationListType [],
  border?: boolean,
  fixed?: string | null,
  width?: number,
  index?: boolean,
  align?: string
}>(), {
  tableData: () => [],
  tableHeade: () => [],
  operationList: () => [],
  border: true,
  fixed: null,
  width: 120,
  index: true,
  align: 'center'
})
const emits = defineEmits<{
  (e: 'operation', item: operationListType, obj: tableDataType): void;
  (e: 'confirmDelete', item: tableDataType): void;
}>()
const handleClick = (item: operationListType, obj: tableDataType) => {
  emits('operation', item, obj)
}
const confirmDelete = (item: tableDataType) => {
  console.log(1111) 
  emits('confirmDelete', item)
}
onMounted(() => {
  console.log(props)
})
</script>
<style scoped lang="scss">
  .button {
    color: variable.$color;
    margin-right: 10px;
    cursor: pointer;
  }
</style>
